<template>
    <div class="all-list">
        <el-card class="container mt-4 mb-5 pb-5">
            <div slot="header" class="clearfix">
                <span><span class="card-header-box"></span>完善信息</span>
                <a href="javascript:;" class="list-button float-right p-1" @click="logout">登出</a>
                <a v-if="user.type === '录入'" href="javascript:;" class="list-button float-right p-1 mr-3" @click="toEnrollSituation">查看结果</a>
            </div>
            <div class="card-body p-0">
                <div class="second-title mb-4">
                    <span>报名情况</span>
                </div>


                <div class="d-flex justify-content-center flex-wrap mb-5" :loading="isLoading">

                    <template v-for="(item,index) in EnrollList.items">
                        <el-col :span="7" :offset="2" class="mt-3">
                        <span class="mr-5 pr-5">NO.{{ index+1 }} 静海{{ item.school_name }}</span>
                            <span :class="item.registration_numbers > item.upper_limit ? 'colorRed' : ''">
                            {{ item.registration_numbers }}</span> / <span>{{ item.upper_limit }}</span>
                        </el-col>
                    </template>
                    <!--<el-col :span="7" :offset="2" class="mt-3">-->
                        <!--<span class="mr-5 pr-5">NO.1 静海{{ EnrollList[0].school_name }}</span>-->
                        <!--<span :class="complateNum(EnrollList[0].registration_numbers,EnrollList[0].upper_limit) ? colorRed : ''">{{ EnrollList[0].registration_numbers }}<span> / </span>{{ EnrollList[0].upper_limit }}</span>-->
                    <!--</el-col>-->
                    <!--<el-col :span="7" :offset="1" class="mt-3">-->
                        <!--<span class="mr-5 pr-5">NO.4 静海{{ EnrollList[5].school_name }}</span>-->
                        <!--<span :class="complateNum(EnrollList[5].registration_numbers,EnrollList[5].upper_limit) ? colorRed : ''">{{ EnrollList[5].registration_numbers }}<span> / </span>{{ EnrollList[5].upper_limit }}</span>-->
                    <!--</el-col>-->
                    <!--<el-col :span="7" :offset="2" class="mt-3">-->
                        <!--<span class="mr-5 pr-5">NO.2 静海{{ EnrollList[1].school_name }}</span>-->
                        <!--<span :class="complateNum(EnrollList[1].registration_numbers,EnrollList[1].upper_limit) ? colorRed : ''">{{ EnrollList[1].registration_numbers }}<span> / </span>{{ EnrollList[1].upper_limit }}</span>-->
                    <!--</el-col>-->
                    <!--<el-col :span="7" :offset="1" class="mt-3">-->
                        <!--<span class="mr-5 pr-5">NO.5 静海{{ EnrollList[2].school_name }}</span>-->
                        <!--<span :class="complateNum(EnrollList[2].registration_numbers,EnrollList[2].upper_limit) ? colorRed : ''">{{ EnrollList[2].registration_numbers }}<span> / </span>{{ EnrollList[2].upper_limit }}</span>-->
                    <!--</el-col>-->
                    <!--<el-col :span="7" :offset="2" class="mt-3">-->
                        <!--<span class="mr-5 pr-5">NO.3 静海{{ EnrollList[3].school_name }}</span>-->
                        <!--<span :class="complateNum(EnrollList[3].registration_numbers,EnrollList[3].upper_limit) ? colorRed : ''">{{ EnrollList[3].registration_numbers }}<span> / </span>{{ EnrollList[3].upper_limit }}</span>-->
                    <!--</el-col>-->
                    <!--<el-col :span="7" :offset="1" class="mt-3">-->
                        <!--<span class="mr-5 pr-5">NO.6 静海{{ EnrollList[4].school_name }}</span>-->
                        <!--<span :class="complateNum(EnrollList[4].registration_numbers,EnrollList[4].upper_limit) ? colorRed : ''">{{ EnrollList[4].registration_numbers }}<span> / </span>{{ EnrollList[4].upper_limit }}</span>-->
                    <!--</el-col>-->
                </div>
                <div class="second-title mb-4">
                    <span>幼儿信息</span>
                </div>
                <div>
                    <el-form :model="model" ref="model" :rules="ruleValidate" label-width="160px" style="width: 100%">
                        <template v-for="(child,index) in model.children">
                            <template v-if="index == 0">
                            <!--<template v-if="true">-->
                                <el-col :span="8" :offset="3">
                                    <el-form-item class="mb-3" label="幼儿姓名: "
                                                  :prop="'children.' + index + '.name'"
                                                  :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}"
                                    >
                                        <el-input v-model="child.name" placeholder="请输入姓名"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="1">
                                    <el-form-item class="mb-3" label="幼儿择园意向: ">
                                                  <!--:prop="'children.' + index + '.school_id'"-->
                                                  <!--:rules="{required: true,type:'integer', message: '请选择学校', trigger: 'blur'}"-->

                                        <el-select v-model="child.school_id" clearable placeholder="请选择学校" style="width: 100%;" :disabled="true">
                                            <el-option v-for="item in schoolList"
                                                       :key="item.id" :label="item.name" :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="3">
                                    <el-form-item class="mb-3" label="幼儿性别: "
                                                  :prop="'children.' + index + '.sex'"
                                                  :rules="{required: true, message: '性别不能为空', trigger: 'blur'}"
                                    >
                                        <el-radio class="mt-2" v-model="child.sex" label="0">男
                                        </el-radio>
                                        <el-radio class="mt-2" v-model="child.sex" label="1">女
                                        </el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="1">
                                    <el-form-item class="mb-3" label="民族: "
                                                  :prop="'children.' + index + '.nation'"
                                                  :rules="{required: true, message: '请输入民族', trigger: 'blur'}"
                                    >
                                        <el-input v-model="child.nation" placeholder="请输入民族"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="3">
                                    <el-form-item class="mb-3" label="幼儿身份证号: "
                                                  :prop="'children.' + index + '.id_code'"
                                                  :rules="{required: true, validator: validateIdCard,  trigger: 'blur'}"
                                    >
                                        <el-input v-model="child.id_code" placeholder="请输入幼儿身份证号"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="1">
                                    <el-form-item class="mb-3" label="儿童预防接种证号: "
                                                  :prop="'children.' + index + '.prophylactic_code'"
                                                  :rules="{required: true,  min:11, max:11,   message: '请输入儿童预防接种证号', trigger: 'blur'}"
                                    >
                                        <el-input v-model="child.prophylactic_code" placeholder="请输入儿童预防接种证号"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="3">
                                    <el-form-item class="mb-3" label="幼儿户籍所属派出所: "
                                                  :prop="'children.' + index + '.police_station_id'"
                                                  :rules="{required: true, type:'integer', message: '请选择幼儿户籍所属派出所', trigger: 'change'}"
                                    >
                                        <el-select v-model="child.police_station_id" clearable placeholder="请选择幼儿户籍所属派出所" style="width: 100%;">
                                            <el-option v-for="item in policeList"
                                                       :key="item.policeStation.id" :label="item.policeStation.name" :value="item.policeStation.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="1">
                                    <el-form-item class="mb-3" label="幼儿与户主关系: "
                                                  :prop="'children.' + index + '.relation'"
                                                  :rules="{required: true, message: '请输入幼儿与户主关系', trigger: 'blur'}"
                                    >
                                        <el-input v-model="child.relation" placeholder="请输入幼儿与户主关系"></el-input>
                                    </el-form-item>
                                </el-col>
                                <!--<template v-if="userId == 0">-->
                                    <el-col :span="8" :offset="3">
                                        <el-form-item class="mb-3" label="是否是多胞胎: ">
                                            <el-checkbox v-model="model.is_twins">多胞胎
                                            </el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                    <template v-if="model.is_twins">
                                        <el-col :span="8" :offset="1">
                                            <el-form-item class="mb-3" label="是否绑定统一派位: ">
                                                <el-checkbox v-model="checked" @change="setTwins">是
                                                </el-checkbox>
                                            </el-form-item>
                                        </el-col>
                                    </template>
                                <!--</template>-->
                            </template>
                            <template v-else>
                                <div  v-if="model.is_twins&&checked">
                                    <el-col :span="8" :offset="3">
                                        <el-form-item class="mb-3" label="幼儿姓名: "  :prop="'children.' + index + '.name'"
                                                      :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}"
                                        >
                                            <el-input v-model="child.name" placeholder="请输入姓名"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" :offset="1">
                                        <el-form-item class="mb-3" label="幼儿身份证号: "   :prop="'children.' + index + '.id_code'"
                                                      :rules="{required: true, validator: validateIdCard,  trigger: 'blur'}">
                                            <el-input v-model="child.id_code" placeholder="请输入幼儿身份证号"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" :offset="3">
                                        <el-form-item class="mb-3" label="民族: "
                                                      :prop="'children.' + index + '.nation'"
                                                      :rules="{required: true, message: '请输入民族', trigger: 'blur'}"
                                        >
                                            <el-input v-model="child.nation" placeholder="请输入民族"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" :offset="1">
                                        <el-form-item class="mb-3" label="儿童预防接种证号: "
                                                      :prop="'children.' + index + '.prophylactic_code'"
                                                      :rules="{required: true, min:11, max:11, message: '请输入儿童预防接种证号', trigger: 'blur'}"
                                        >
                                            <el-input v-model="child.prophylactic_code" placeholder="请输入儿童预防接种证号"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" :offset="3">
                                        <el-form-item class="mb-3" label="幼儿性别: "
                                                      :prop="'children.' + index + '.sex'"
                                                      :rules="{required: true, message: '性别不能为空', trigger: 'blur'}"
                                        >
                                            <el-radio class="mt-2" v-model="child.sex" label="0">男
                                            </el-radio>
                                            <el-radio class="mt-2" v-model="child.sex" label="1">女
                                            </el-radio>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" :offset="1" style="height: 64px">
                                        <el-form-item class="mb-3" label=" ">

                                        </el-form-item>
                                    </el-col>
                                </div>
                            </template>
                        </template>
                    <div class="otherChild" >
                        <div  v-if="model.is_twins&&checked">
                            <el-col :span="8" :offset="12" class="mb-4">
                                <a  href="javascript:;" class="list-button float-right border-0" @click="addChild">+ 增加</a>
                            </el-col>
                        </div>
                    </div>
                    <div class="second-title d-flex align-items-center mb-4">
                        <span>家庭情况</span>
                    </div>
                    <el-col :span="8" :offset="3">
                        <el-form-item class="mb-3" label="监护人一: " prop="father_name">
                            <el-input v-model="model.father_name" placeholder="请输入监护人一姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item class="mb-3" label="与儿童关系: " prop="father_type">
                            <el-autocomplete
                                    class="inline-input"
                                    v-model="model.father_type"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入与儿童关系"
                                    style="width: 100%"
                            ></el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="3">
                        <el-form-item class="mb-3" label="身份证号: " prop="father_id_code">
                            <el-input v-model="model.father_id_code" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item class="mb-3" label="工作单位: " prop="father_works">
                            <el-input v-model="model.father_works" placeholder="请输入工作单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="3">
                        <el-form-item class="mb-3" label="有效联系电话: " prop="father_phone_number">
                            <el-input v-model="model.father_phone_number" placeholder="请输入有效联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item class="mb-3" label=" " style="height: 48px;">

                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="3">
                        <el-form-item class="mb-3" label="监护人二: " prop="mother_name">
                            <el-input v-model="model.mother_name" placeholder="请输入监护人二姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item class="mb-3" label="与儿童关系: " prop="mother_type">
                            <el-autocomplete
                                    class="inline-input"
                                    v-model="model.mother_type"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入与儿童关系"
                                    style="width: 100%"
                            ></el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="3">
                        <el-form-item class="mb-3" label="身份证号: " prop="mother_id_code">
                            <el-input v-model="model.mother_id_code" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item class="mb-3" label="工作单位: " prop="mother_works">
                            <el-input v-model="model.mother_works" placeholder="请输入工作单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="3" >
                        <el-form-item class="mb-3" label="有效联系电话: " prop="mother_phone_number">
                            <el-input v-model="model.mother_phone_number" placeholder="请输入有效联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item class="mb-3" label=" " style="height: 48px;">

                            </el-form-item>
                        </el-col>
                    <el-col :span="8" :offset="3">
                        <el-form-item class="mb-3" label="家庭住址: " prop="family_address">
                            <el-input v-model="model.family_address" placeholder="请输入家庭住址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="7">
                        <el-form-item class="mb-3" label="" >
                            <el-button type="primary" class="col" @click="saveModel" :loading="loading">提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
                </div>
                <!--<div class="d-block">-->
                    <!--<el-row type="flex" justify="center">-->
                        <!--<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
                        <!--<el-col :span="20">-->
                            <!--<el-button type="primary" class="mb-5 mt-5 col-3" @click="showDialog">提交</el-button>-->
                        <!--</el-col>-->
                        <!--<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
                    <!--</el-row>-->
                <!--</div>-->
            </div>
        </el-card>
    </div>
</template>
<script>
  import ListDataSource from '../libs/ListDataSource.js'
  import DataApi from '../api/data'
  import ElCheckbox from '../../../../node_modules/element-ui/packages/checkbox/src/checkbox.vue'
  import Cookie from 'js-cookie'
  export default {
    components: {ElCheckbox},
    data(){
      const validateMobile = (rule, value, callback) => {
        if (value) {
          let regex = /^1(3|4|5|7|8)[0-9]{9}$/;
          if (regex.test(value)) {
            callback();
          } else {
            callback(new Error('请输入有效的电话号码！'));
          }
        }else{
          callback(new Error('手机号必填'));
        }
      };
      const validateIdCard = (rule, value, callback) => {
        if (value) {
          let regex = /^(([0-9]{18})|([0-9]{17}x)|([0-9]{17}X))$/;
          if (regex.test(value)) {
            callback();
          } else {
            callback(new Error('请输入有效的证件号码！'));
          }
        } else {
          callback(new Error('请输入身份证号码！'));
        }
      };
      return {
        model:{
//            children:[
//              {
//                name:'',
//                sex:'',
//                nation:'',
//                police_station_id:'',
//                school_id:'',
//                id_code:'',
//                prophylactic_code:'',
//                relation:'',
//              }
//            ],
//            twins: 1,
//            is_twins: false,
//            father_name: '阿金',
//            father_works: '天津市南开区华苑林苑西里啦啦啦啦啦',
//            father_id_code: '',
//            father_phone_number: '',
//            mother_name: '阿红',
//            mother_id_code: '',
//            mother_works: '天津市南开区华苑林苑西里啦啦啦啦啦',
//            mother_phone_number: '',
//            family_address: '天津市南开区华苑林苑西里啦啦啦啦啦'
            children:[
              {
                name:'',
                sex:'',
                nation:'',
                police_station_id:'',
                school_id:'',
                id_code:'',
                prophylactic_code:'',
                relation:'',
              }
            ],
            twins: 1,
            is_twins: false,
            father_name: '',
            father_type: '',
            father_works: '',
            father_id_code: '',
            father_phone_number: '',
            mother_name: '',
            mother_type: '',
            mother_id_code: '',
            mother_works: '',
            mother_phone_number: '',
            family_address: ''
          },
        checked: false,
        EnrollList: new ListDataSource('/api/situation-info'),
        isLoading: false,
        ruleValidate: {
          father_name: [
            {required: true, message: '此项目为必填项', trigger: 'blur'}
          ],
          father_type: [
            {required: true, message: '此项目为必填项', trigger: 'change'}
          ],
          father_works: [
            {required: true, message: '此项目为必填项', trigger: 'blur'}
          ],
          father_id_code: [
            {required: true, validator: validateIdCard,  trigger: 'blur'}
            ],
          father_phone_number: [
            {required: true,  validator: validateMobile,  trigger: 'blur'}
          ],
          mother_name: [
            {required: true, message: '此项目为必填项', trigger: 'blur'}
          ],
          mother_type: [
            {required: true, message: '此项目为必填项', trigger: 'change'}
          ],
          mother_id_code: [
            {required: true, validator: validateIdCard,  trigger: 'blur'}
          ],
          mother_works: [
            {required: true, message: '此项目为必填项', trigger: 'blur'}
          ],
          mother_phone_number: [
            {required: true, validator: validateMobile,  trigger: 'blur'}
          ],
          family_address: [
            {required: true, message: '此项目为必填项', trigger: 'blur'}
          ]
        },
        policeList: {},
        schoolList: [
          {name: '所有幼儿园', id: '0'},
          {name: '第一幼儿园', id: '101'},
          {name: '第二幼儿园', id: '102'},
          {name: '第四幼儿园', id: '104'},
          {name: '模范幼儿园', id: '106'},
          {name: '第三幼儿园', id: '103'},
          {name: '第五幼儿园', id: '105'}
        ],
        userId: '',
        loading: false,
        restaurants: [
          {'value': '父亲','type':  '父亲'},
          {'value': '母亲','type':  '母亲'},
          {'value': '祖父','type':  '祖父'},
          {'value': '祖母','type':  '祖母'},
          {'value': '外祖父','type':  '外祖父'},
          {'value': '外祖母','type':  '外祖母'}
          ]
      }
    },
//    mounted() {
//      this.restaurants = this.typeList();
//    },
    created () {
      let self = this
      self.userId = self.$route.params.user_id
      self.model.children[0].school_id = this.$store.state.user.school_id
      this.isLoading = true
      if (self.userId == 0){//录入
        DataApi.getPolice(self.model.children[0].school_id).then(res=>{
          self.policeList = res.data.data
        })
      }
      self.EnrollList.fetchData()
    },
    methods: {
      querySearch(queryString, cb) {
        let restaurants = this.restaurants;
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
//      typeList(){
//        return [
//          {'value': '父亲','type':  '父亲'},
//          {'value': '母亲','type':  '母亲'},
//          {'value': '祖父','type':  '祖父'},
//          {'value': '祖母','type':  '祖母'}
//        ]
//      },
      toEnrollSituation(){
        this.$router.push({
          name: 'only-enroll-situation',
        })
      },
      addChild(){
        this.model.children.push({'name':'','id_code':'','nation':'','prophylactic_code':'','sex':''})
        this.model.twins = this.model.children.length
      },
      setTwins(){
        if(!this.checked){//false
          let arr = this.model.children[0]
          this.model.children = []
          this.model.children[0] = arr
        }else{
          if(this.model.children.length == 1){
            this.model.children.push({'name':'','id_code':'','nation':'','prophylactic_code':'','sex':''})
          }
        }
        console.log(this.model.children.length)
        this.model.twins = this.model.children.length
      },
      saveModel () {
        let self = this
        console.log(self.model)
        self.$refs['model'].validate((valid) => {
          if (valid) {
            console.log('表单验证通过');
//            self.loading = true;
            let uuid = self.model.id ? self.model.id : 0
            if (uuid == 0) {
              DataApi.postStudent(self.model).then((res) => {
                this.$router.push({
                  path: '/home/print-out/' + res.data.data.id,
                })
              }).catch((err)=>{
                console.log(err.response)
                self.$message.error(err.response.data.message)
              })
            }else {
              DataApi.putStudent(uuid,self.model).then(res => {
                this.$router.push({
                  path: '/home/print-out/' + self.model.id,
                }).catch((err)=>{
                  self.$message.error(err.response.data.message)
                })
              })
            }
          } else {
            console.log('表单验证失败');
          }
        });
      },
      logout(){
        axios.post('/api/logout', {})
          .then(function (response) {
            Cookie.remove('user');
            window.location.reload();
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      validateMobile :(rule, value, callback) => {
        if (value) {
          let regex = /^1(3|4|5|7|8)[0-9]{9}$/;
          if (regex.test(value)) {
            callback();
          } else {
            callback(new Error('请输入有效的电话号码！'));
          }
        }else{
          callback(new Error('手机号必填'));
        }
      },
      validateIdCard : (rule, value, callback) => {
        if (value) {
          let regex = /^(([0-9]{18})|([0-9]{17}x)|([0-9]{17}X))$/;
          if (regex.test(value)) {
            callback();
          } else {
            callback(new Error('请输入有效的证件号码！'));
          }
        } else {
          callback(new Error('请输入身份证号码！'));
        }
      },
    },
    computed:{
      user(){
        return this.$store.state.user
      }
    },
    watch:{
      'userId':function (value) {
        let self = this
        if (value != 0 ){
          DataApi.getStudentInfo(value).then(res=>{
            self.model = res.data.data
            self.checked = res.data.data.twins > 1 ? true :false
            DataApi.getPolice(self.model.children[0].school_id).then(res => { //修改
              self.policeList = res.data.data
              console.log(self.policeList)
            })
          }).catch(err=>{
            console.log(err.response)
          })
        }else {
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
    .all-list{
        font-size: 14px;
        .second-title {
            background: #f1f2f6;
            height: 40px;
            line-height: 40px;
            color: #6c7d43 ;
            width: 100%;
            span {
                padding-left: 32px;
                font-size: 13px;
            }
        }
    }
</style>
